<template>
    <div class="tabs">
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab01" checked />
    <label class="tab-item" for="tab01">高血压评估</label>
    <div class="tab-content">
        <el-form label-width="70px" size="small">
            <div class="search-div">
                <el-form label-width="70px" size="small">
                      <el-form-item label="是否抽烟">
                          <el-radio v-model="pingg.yan" label="2">是</el-radio>
                          <el-radio v-model="pingg.yan" label="1">否</el-radio>
                        </el-form-item>

                        <el-form-item label="运动频率">
                          <el-radio v-model="pingg.yun" label="1">经常</el-radio>
                          <el-radio v-model="pingg.yun" label="2">不运动</el-radio>
                        </el-form-item>

                        <el-form-item label="饮食习惯">
                          <el-radio v-model="pingg.yin" label="2">偏高盐</el-radio>
                          <el-radio v-model="pingg.yin" label="1">健康饮食</el-radio>
                        </el-form-item><br/>

                        <el-form-item label="家族中是否有高血压、心血管疾病等相关疾病的患者？" class="xin">
                          <el-radio v-model="pingg.yichaun" label="2">是</el-radio>
                          <el-radio v-model="pingg.yichaun" label="1">否</el-radio>
                        </el-form-item>
                        <el-form-item label="收缩压" class="widths">
                            <el-input v-model="pingg.shousuo"/>
                        </el-form-item>
                        <el-form-item label="舒张压" class="widths">
                            <el-input v-model="pingg.shuzhang"/>
                        </el-form-item>
                        <el-button type="primary" size="small" @click="findManages">
                            开始评估
                        </el-button>
                </el-form>

                <el-dialog v-model="dialogVisible" title="高血压评估" width="70%">
                    <el-form label-width="120px">
                      <el-form-item label="是否患有高血压:">
                          <el-text/>{{ pingguvo.shifou }}
                      </el-form-item>
                      <el-form-item label="患有高血压的等级:" v-if="pingguvo.shifou == '慢病患者'">
                          <el-text/>{{ pingguvo.dengji }}
                      </el-form-item>
                      <el-form-item label="未患有高血压，会患有高雪血的等级:" v-if="pingguvo.shifou == '一般人群'">
                          <el-text/>{{ pingguvo.weilai }}
                      </el-form-item>
                      <el-form-item>
                          <el-button type="primary" @click="submit">保存</el-button>
                          <el-button @click="dialogVisible = false">取消</el-button>
                      </el-form-item>
                    </el-form>
                </el-dialog> 
            </div>
        </el-form>
    </div>
  </div>
  <!-- 糖尿病=========================================================================================== -->
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab02"/>
    <label class="tab-item" for="tab02">糖尿病评估</label>
    <div class="tab-content">
      <el-form label-width="70px" size="small">
            <div class="search-div">
                <el-form label-width="70px" size="small">
                      <el-form-item label="是否有糖尿病家族史？" class="jiazu">
                          <el-radio v-model="tnbpingg.jiazu" label="2">是</el-radio>
                          <el-radio v-model="tnbpingg.jiazu" label="1">否</el-radio>
                        </el-form-item>

                        <el-form-item label="是否有高血压史？">
                          <el-radio v-model="tnbpingg.gxys" label="2">是</el-radio>
                          <el-radio v-model="tnbpingg.gxys" label="1">否</el-radio>
                        </el-form-item>

                        <el-form-item label="是否出现体重下降？" class="tiz">
                          <el-radio v-model="tnbpingg.tiz" label="2">是</el-radio>
                          <el-radio v-model="tnbpingg.tiz" label="1">否</el-radio>
                        </el-form-item>

                        <el-form-item label="平均每天摄入蔬菜和水果的份量" class="fenli">
                            <el-input v-model="tnbpingg.fenli"/>{{ "g" }}
                        </el-form-item>
                        <el-form-item label="空腹血糖水平" class="kfth">
                            <el-input v-model="tnbpingg.kfxt"/>{{ "(mmol/L)" }}
                        </el-form-item>
                        <el-form-item label="糖化血红蛋白(HbA1c)" class="kfth">
                            <el-input v-model="tnbpingg.thxh"/>{{ "(%)" }}
                        </el-form-item>
                        <el-button type="primary" size="small" @click="tnbpinggu">
                            开始评估
                        </el-button>
                </el-form>

                <el-dialog v-model="dialogVisibles" title="高血压评估" width="70%">
                    <el-form label-width="120px">
                      <el-form-item label="是否患有糖尿病:">
                          <el-text/>{{ tnbpinggvo.shifou }}
                      </el-form-item>
                      <el-form-item label="患有糖尿病的等级:" v-if="tnbpinggvo.shifou == '请注意，您已在糖尿病范围内，请及时去医院进行治疗'">
                          <el-text/>{{ tnbpinggvo.dengji }}
                      </el-form-item>
                      <el-form-item label="未患有糖尿病，会患有糖尿病的等级:" v-if="tnbpinggvo.shifou == '健康人群'">
                          <el-text/>{{ tnbpinggvo.weilai }}
                      </el-form-item>
                      
                      <el-form-item label="健康提示:" v-if="tnbpingg.fenli < 80">
                          <el-text/>{{ "每天摄入的蔬菜和水果量过少,请多补充补充" }}
                      </el-form-item>
                      <el-form-item>
                          <el-button type="primary" @click="submittnb">保存</el-button>
                          <el-button @click="dialogVisibles = false">取消</el-button>
                      </el-form-item>
                    </el-form>
                </el-dialog> 
            </div>
        </el-form>
    </div>
  </div>
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab03"/>
    <label class="tab-item" for="tab03">冠心病评估</label>
    <div class="tab-content">冠心病评估</div>
  </div>
</div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { result,results,AddEvaluate } from "@/api/evaluate";
import { ElMessage,ElMessageBox } from 'element-plus';

const dialogVisible = ref(false)
//糖尿病
const dialogVisibles = ref(false)

//初始化数据
const pingg = ref({
  name:'高血压评估',
  yan:'',
  yun:'',
  yin:'',
  yichaun:'',
  shuzhang:'',
  shousuo:''
})

const pingguvo = ref({
  shifou:'',
  dengji:'',
  weilai:''
})

//糖尿病初始化数据
const tnbpingg = ref({
  jiazu:'',
  gxys:'',
  tiz:'',
  fenli:'',
  kfxt:'',
  thxh:''
})
//糖尿病结果数据
const tnbpinggvo = ref({
  shifou:'',
  dengji:'',
  weilai:''
})

onMounted(()=>{
})

//高血压进行评估
const findManages = async()=>{
  const {data} = await result(pingg.value)
  pingguvo.value = data
  dialogVisible.value = true
}


//糖尿病评估
const tnbpinggu = async()=>{
  const {data} = await results(tnbpingg.value)
  tnbpinggvo.value = data
  dialogVisibles.value = true
}

const submit = async ()=>{
  const pinggwenjuan = {
    pingGu:pingg.value,
    pingGuVo:pingguvo.value
  }
  const {message,code} = await AddEvaluate(pinggwenjuan)
        if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
        } else {
            ElMessage.error(message)
        }
}

</script>

<style lang="scss" scoped>
.tabs{
  position:relative;
  width:100%;
  height:100%;
}
.xin{
  width:100px;
  height:150px;
}
.jiazu{
  width:150px;
  height:50px;
}

.weilai{
  width:100px;
  height:100px;
}

.tiz{
  width:150px;
  height:50px;
}
.tab-pane{
  display:inline-block;
}

.fenli{
  width:200px;
  height:100px;
}
.tabs input[type='radio']{
  position:absolute;
  clip:rect(0,0,0,0)
}
.tab-item{
  display:block;
  position:relative;
  height:34px;
  line-height:34px;
  cursor:pointer;
  padding:0 10px
}

.tab-item:after{
  position:absolute;
  content:'';
  height:3px;
  width:100%;
  background:orangered;
  left:0;
  bottom:2px;
  transition:.3s;
  transform:scaleX(0)
}

.tabs input[type='radio']:checked+.tab-item:after{
  transform:scaleX(1)
}

.widths{
  width: 200px;
}

.kfth{
  width: 200px;
}
.tab-content{
  position:absolute;
  background:#eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  transition:.3s;
  opacity:0;
  transform:translateY(50px)
}

.tabs input[type='radio']:checked+.tab-item+.tab-content{
  z-index:1;
  opacity:1;
  transform:translateY(0)
}
</style>